<template>
    <div>
        <div>
            <el-row class="titleBackground">
                <el-col :span="16">
                    <el-form inline size="small" style="margin-bottom:-20px">
                        <el-form-item>
                            <el-button size="small" class="title">我的球员({{total}})</el-button>
                            <el-button size="small" class="title">应到({{sum}})</el-button>
                            <el-button size="small" class="title">实到({{count}})</el-button>
                        </el-form-item>

                        <!-- <el-form-item>
                          <el-select v-model="searchForm.grouping" clearable size="small" @change="fetchList">
                            <el-option
                              v-for="item in options"
                              :key="item.dictName"
                              :label="item.dictName"
                              :value="item.id">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="快速查询">
                          <el-input v-model="searchForm.name"/>
                        </el-form-item>

                        <el-form-item>
                          <el-button @click="onSearch">查询</el-button>
                        </el-form-item> -->
                    </el-form>


                </el-col>

                <el-col :span="8" style="text-align:right" v-if="buttonDis">
                    <el-button size="mini" @click="onKaoQin2(2)">考勤</el-button>
                    <el-button size="mini" type="primary" @click="onKaoQin2(1)">缺勤</el-button>
                    <!-- <el-button class="theme-blue" size="small" @click="groupDialog = true">分组管理</el-button>
                    <el-button class="theme-blue" size="small" @click="deleteDialog = true" :disabled="!selectList.length">移除球员</el-button>
                    <el-button type="primary" size="small" @click="examineDialog = true">球员审核列表</el-button> -->
                </el-col>
            </el-row>

            <el-row style="margin-top:10px">
                <el-col :span="24">
                    <el-table
                            ref="multipleTable"
                            stripe
                            :data="tableList"
                            style="width: 100%"
                            @selection-change="selectChange"
                    >

                        <el-table-column type="selection" width="55"/>

                        <el-table-column
                                label="序号"
                                type="index"
                                width="50"
                                align="center"/>

                        <el-table-column label="照片">
                            <template slot-scope="scope">
                                <img :src="scope.row.imgs" alt="">
                            </template>
                        </el-table-column>

                        <el-table-column
                                v-for="(item, index) in header"
                                :prop="item.prop"
                                :label="item.label"
                                :width="item.width"
                        />
                        <el-table-column label="考勤状态">
                            <template slot-scope="scope">
                                <span>{{scope.row.type|filtersoption(options2)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <span size="mini" style="color:#2d64b3;cursor: pointer"
                                      @click="onKaoQin(scope.row.id,2)">考勤</span>&nbsp;
                                <span size="mini" type="primary" style="color:red;cursor: pointer"
                                      @click="onKaoQin(scope.row.id,1)">缺勤</span>
                            </template>
                        </el-table-column>
                    </el-table>

                    <br>
                    <el-pagination
                            background
                            style="float:right;margin-top: 30px"
                            @current-change="pageChange"
                            layout="prev, pager, next"
                            :total="searchForm.total">
                    </el-pagination>

                    <span style="float:right;padding-top:36px;">共{{searchForm.total}}名球员，每页{{searchForm.pageSize}}名球员</span>
                    <div style="clear:both"></div>
                    <br>
                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>
    import {mapActions, mapState} from 'vuex'
    import ExamineList from './ExamineList'
    import GroupList from './GroupList'

    const header = [
        {prop: 'name', label: '球员'},
        {prop: 'age', label: '年龄'},
        {prop: 'height', label: '身高(cm)'},
        {prop: 'weight', label: '体重(cm)'},
        {prop: 'sumScoure', label: '综合能力'}
    ]

    export default {
        components: {ExamineList, GroupList},
        data() {
            return {
                header,
                groupDialog: false,
                examineDialog: false,
                addPKDialog: false,
                deleteDialog: false,
                tableList: [
                    {
                        "courseId": 0,
                        "createTime": "2019-06-22T16:00:37.843Z",
                        "id": 0,
                        "playerId": 0,
                        "status": 0,
                        "type": 0,
                        "updateTime": "2019-06-22T16:00:37.843Z"
                    }
                ],
                options2: [
                    {label: '未出勤', value: 0},
                    {label: '缺勤', value: 1},
                    {label: '已出勤', value: 2},
                    {label: '未打卡', value: 3},
                ],

                searchForm: {
                    courseId: this.$route.query.id,
                    pageNum: 1,
                    pageSize: 10,
                    total: 0
                },
                searchForm2: {
                    grouping: '',
                    pageNum: 1,
                    pageSize: 10,
                    coachId: sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0
                },

                selectList: [],
                list: [],
                total: 0,
                sum:0,
                count:0,
            }
        },

        computed: {
            dateHeader() {
                const date = this.activeDate
            },

            ...mapState('Login', [
                'userStatus'
            ]),

        },

        props: {
            buttonDis: {
                type: Boolean,
                default: true
            }
        },

        methods: {
            ...mapActions('coachTraining', [
                'fetchPlayerList',
                'deletePlayer',
                'fetchSelectList',
                'getKaoQinList',
                'doKaoQin',
            ]),

            toDetail(scope) {
                const {row: {id}} = scope
                this.$router.push({name: 'playerDetail', query: {id}})
            },

            onClose() {
                this.groupDialog = false
                this.examineDialog = true
            },

            clickDay(val) {
                this.activeDate = new Date(val).valueOf()
            },

            onSearch() {
                this.searchForm.pageNum = 1
                this.fetchList()
            },

            fetchList() {
                this.searchForm.coachId = this.userStatus.statusId
                for (let i in this.searchForm) {
                    if (i !== 'grouping' && i !== 'name') {
                        this.searchForm[i] = Number(this.searchForm[i])
                    }
                }

                this.getKaoQinList(this.searchForm).then(res => {
                    const {code, data: {list, total,sum,count}} = res
                    if (code === 200) {
                        this.tableList = list || []
                        this.searchForm.total = Number(total)
                        this.total = Number(total)
                        this.sum = Number(sum)
                        this.count = Number(count)
                    }
                })
            },

            selectChange(val) {
                this.selectList = val
                console.log(val);
                this.$emit('selectPlayer', val)
            },

            pageChange(val) {
                this.searchForm.pageNum = val
                this.fetchList()
            },

            onKaoQin(playerId, type) {
                this.fetchKaoQin(playerId, type)
            },
            onKaoQin2(type) {
                var data = this.selectList
                if(data.length==0){
                    this.$message({
                        message: '还没有选中球员',
                        type: 'warning'
                    });
                    return

                }
                var data3=[]
                for (var i = 0; i < data.length; i++) {
                    data[i].type = type
                    let data2={
                        "courseId": Number(this.$route.query.id),
                        "playerId": data[i].id,
                        "type": type
                    }
                    data3.push(data2)
                }
                this.doKaoQin(data3).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.searchForm.pageNum = 1
                        this.fetchList()
                    }
                })
            },

            fetchKaoQin(playerId, type) {
                var data2 = [{
                    "courseId": Number(this.$route.query.id),
                    "playerId": playerId,
                    "type": type
                }]
                this.doKaoQin(data2).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.searchForm.pageNum = 1
                        this.fetchList()
                    }
                })
            },

            getSelect() {
                this.fetchSelectList({type: 'PG'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.options = list || []
                    }
                })
            },

            onDelete() {
                let list = []
                this.selectList.forEach(item => {
                    list.push(item.id)
                })

                this.deletePlayer({ids: list}).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.deleteDialog = false
                        this.searchForm.pageNum = 1
                        this.fetchList()
                    }
                })
            }
        },

        created() {
            this.fetchList()
            this.getSelect()
        },
        filters: {
            filtersoption: function (e, data) {
                console.log(e);
                console.log(data);
                for (var i = 0; i < data.length; i++) {
                    if (e == data[i].value) {
                        console.log(data[i].label);
                        return data[i].label
                    }
                }
            },
        },

    }
</script>

<style scoped>
    .titleBackground {
        padding: 10px;
        background: #f5f7fa;
        border: 1px solid #f7f7f7;
    }
</style>

<style>
    .wh_content_all[data-v-2ebcbc83] {
        background-color: #2d64b3;
    }

    .wh_content_item .wh_isToday[data-v-2ebcbc83] {
        background: #254d87;
    }

    .wh_content_item .wh_chose_day[data-v-2ebcbc83] {
        background: #254d87;
    }

    .title {
        background: none;
        border: none;
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .inDetail {
        cursor: pointer;
        color: #2d64b3;
    }

    .SBBZ {
        color: #c60818;
    }
</style>



